<template>
  <van-cell-group id="Rules">
    <van-cell
      v-for="(item, index) in list"
      :key="index"
      :title="item.title | sliceStr(0, 25, '...')"
      :value="item.val"
      style="text-overflow: ellipsis;overflow: hidden;"
      :id="index"
    >
      <van-icon slot="right-icon" name="close" class="van-cell__right-icon" @click="deleteRule(item.id, index)"/>
    </van-cell>
  </van-cell-group>
</template>

<script>
  import {Cell, CellGroup, Icon, Dialog} from 'vant';

  export default {
    name: "Rules",
    components: {
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Icon.name]: Icon,
      [Dialog.name]: Dialog,
    },
    props:["ruleStatus"],
    data() {
      return {
        list: []
      }
    },
    methods: {
      getData() {
        let _this = this;
        _this.$http.get(_this.apiUrl("selection/index/getCandidateAll"), {
          headers: {
            'sid': _this.$route.query.sid
          }
        })
          .then((res) => {
            // console.log(res.data.data.titles);
            _this.list = res.data.data.titles;
          });
      },
      deleteRule(id, index) {
        let _this = this;
        Dialog.confirm({
          title: '您确定要删除吗？',
        }).then(() => {
          let token = _this.getCookie("token");
          let data = _this.$qs.stringify({
            'id': id
          });
          _this.$http.delete(_this.apiUrl('user/selection/delTitle'), {
            data: data,
            headers: {
              'token': token,
              'sid': _this.$route.query.sid
            }
          }).then((res) => {
            _this.list.splice(index, 1);
          });
        }).catch(() => {
        });
      },
    },
    mounted() {
      let _this = this;
      _this.getData();
    },
    watch:{
      "ruleStatus": function () {
        let _this = this;
        _this.getData();
      }
    }
  }
</script>

<style>
  #Rules .van-cell__title, #Rules .van-cell__value {
    flex: none;
  }

  #Rules .van-cell__title {
    width: 80%;
  }

  #Rules .van-cell__value {
    width: 15%;
  }
</style>

<style scoped>

</style>
